<template>
	<view class="login">

		<view class="form">
			<view class="logo">
				<image src="https://crmeb4.minishop.club/wechat/images/LOGO.png" mode="widthFix"></image>
			</view>
			<u-card :head-style="headStyle">
				<view class="" slot="head">
					店家预约登录
				</view>
				<view class="" slot="body">
					<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
						<u-form-item label="账号" prop="account">
							<u-input placeholder="请输入账号" v-model="form.account" />
						</u-form-item>
						<u-form-item label="密码" prop="pwd">
							<u-input type="password" placeholder="请输入密码" v-model="form.pwd" />
						</u-form-item>
						<u-form-item class="code" :label-position="labelPosition" label="验证码" prop="imgcode"
							label-width="150">
							<u-input :border="border" placeholder="请输入验证码" v-model="form.imgcode" type="text"></u-input>
							<image :src="src" mode="widthFix" @click="changeImg">
							</image>
						</u-form-item>
						<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
						<u-button @click="submit" type="error">登录</u-button>
					</u-form>
				</view>
			</u-card>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'https://crmeb4.minishop.club/adminapi/captcha_pro',
				border: false,
				labelPosition: 'left',
				codeTips: '',
				form: {
					account: '',
					pwd: '',
					imgcode: ''
				},
				headStyle: {
					textAlign: 'center',
					fontSize: '34rpx',
					fontWeight: '700'
				},
				rules: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur,change'
					}],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur,change'
					}],
					imgcode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur,change'
					}]
				},
				errorType: ['message'],
			};
		},
		onLoad() {
			// this.$u.api.getCaptcha().then(res => {
			// 	console.log(res);
			// })
		},
		methods: {
			changeImg(){
				this.src=this.src+'?'+new Date()
			},
			borderCurrent() {
				return this.border ? 0 : 1;
			},
			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			getCaptcha() {
				// this.$u.get('/adminapi/captcha_pro').then(res => {
				// 	console.log(res, 'resres')
				// })
				
					uni.request({
					    url: 'https://crmeb4.minishop.club/adminapi/captcha_pro',
					    success: (res) => {
					        console.log(res);
					       
					    }
					});
				
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					console.log(valid)
					if (valid) {
						console.log(this.form)
						this.$u.api.login(this.form).then(res => {
							console.log(res,'resres');
							if(res.status==400){
								uni.showToast({
									title: res.msg,
									duration: 2000,
									
								});
								return false
							}else if (res.status == 200) {
								uni.setStorageSync('token',res.data.token)
								uni.showToast({
									title: '登录成功',
									duration: 2000,
									
								});
								setTimeout(() => {
									uni.switchTab({
										url:'/pages/view_appointment/view_appointment'
									})
								}, 1000)
							}
						})
						
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style lang="scss">
	.login {

		.form {
			margin-top: 30%;

			.logo {
				width: 260rpx;
				margin: 12rpx auto;

				image {
					width: 100%;
				}
			}

			.code {
				display: flex;
				justify-content: space-between;

				image {
					width: 240rpx;
				}
			}
		}
	}
</style>
